<template>
  <div class="MyTreeSelect" :style="{width: width}">
    <treeselect
        name="treeselect"
        v-bind="$attrs"
        :clearable="true"
        :searchable="true"
        :multiple="multiple"
        :options="options"
        :max-height="400"
        :valueConsistsOf="valueConsistsOf"
        :normalizer="normalizer"
        clearAllText="清除"
        clearValueText="清除"
        noChildrenText="没有子元素"
        noOptionsText="没有下拉选项"
        noResultsText="没有搜到结果"
        placeholder="请选择"
        v-model="selected"
        @open="open"
        @close="close"
        @input="input"
        @select="select"
        @deselect="deselect"
        @search-change="searchChange"
    >
      <template slot="option-label" v-if="$slots['option-label']">
        <slot name="option-label"></slot>
      </template>
      <template slot="value-label" v-if="$slots['value-label']">
        <slot name="value-label"></slot>
      </template>
      <template slot="before-list" v-if="$slots['before-list']">
        <slot name="before-list"></slot>
      </template>
      <template slot="after-list" v-if="$slots['after-list']">
        <slot name="after-list"></slot>
      </template>
    </treeselect>
  </div>
</template>

<script>
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  name: "MyTreeSelect",
  data() {
    return {
      selected: null
    }
  },
  model:{
    prop: 'value'
  },
  components: {
    Treeselect
  },
  props:{
    value:{
      type: [Array, String, Number]
    },
    multiple: {
      default: false,
      type: Boolean
    },
    options:{
      default: Array
    },
    width:{
      type: String,
      default: function (){
        return this.px2(215)
      }
    },
    valueConsistsOf:{
      type: String,
      default: 'ALL'
    },
    normalizer:{
      type: Function,
      default: ()=>(node)=>{
        if (node.children == null || node.children == "null") {
          delete node.children;
        }
      }
    }
  },
  watch: {
    value: {
      handler: function (e){
        this.selected = e
      },
      immediate: true
    },
    selected: {
      handler: function (e){
        this.ElDispatch('ElFormItem', 'el.form.change', e)
      },
      immediate: true
    },
  },
  mounted() {
    console.log(this.$slots)
  },
  methods: {
    open(e){
      this.$emit('open', e)
    },
    close(e){
      this.$emit('close', e)
    },
    input(e){
      this.$emit('input', e)
    },
    select(e){
      this.$emit('select', e)
      this.change(e)
    },
    deselect(e){
      this.$emit('deselect', e)
    },
    searchChange(e){
      this.$emit('search-change', e)
    },
    change(e){
      this.$emit('change', e)
    },

  }
}
</script>

<style lang="scss" scoped>
  @import "@/MUI/style/var.scss";
  .MyTreeSelect{
    display: inline-block;
    vertical-align: middle;
    font-size: px2(14);
    min-height: 32px;
    margin-right: px2(10);
    line-height: px2(16);
    width: 100%!important;
    ::v-deep .el-form-item__conten{
      height: 32px;
    }
    ::v-deep .vue-treeselect__control{
      height: px2(32);
    }
    ::v-deep .vue-treeselect__input-container{
      padding: 0 10px;
    }
    ::v-deep .vue-treeselect__single-value{
      padding: 0 10px;
      line-height: 30px;
    }
     ::v-deep .vue-treeselect__placeholder{
       line-height: 30px;
       padding: 0 10px;
      //line-height: 30px;
    }
  }
</style>
